<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="hotelName">
        <el-input v-model="list.filter.hotelName" placeholder="酒店名称" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="hotelStar">
        <KiSelect v-model="list.filter.hotelStar" :options="dict.mt_hotel_star" placeholder="星级"/>
      </el-form-item>
      <el-form-item prop="closeStatus">
        <KiSelect v-model="list.filter.closeStatus" :options="ststusOfMeituan" placeholder="状态"/>
      </el-form-item>
      <el-button @click="()=>{$refs.listFilterRef.resetFields()}">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <!-- <AuthButton @click="exportList" name="导出" :loading="loading"/> -->
        <ExportExcel
          url="/sot-admin-api/hotel/meituanHotel/export"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index"/>
      <el-table-column label="酒店名称" prop="pointName"/>
      <el-table-column label="电话" prop="phone"/>
      <el-table-column label="城市" prop="cityName"/>
      <el-table-column label="行政区" prop="locationName"/>
      <el-table-column label="商圈" prop="bareaName"/>
      <el-table-column label="星级" prop="hotelStarName"/>
      <el-table-column label="状态" prop="closeStatusName"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row:{hotelId}}">
          <AuthButton @click="detailsOfHotel(hotelId)" name="详情" circle>
            <i class="el-icon-search"/>
          </AuthButton>
        </template>
      </el-table-column>
    </el-table>

    <DetailsDialog v-if="hotelId" :id="hotelId" @clearHotelId="hotelId = null"/>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import DetailsDialog from './components/DetailsDialog'

export default {
  mixins: [pageMixin],
  components: { DetailsDialog },
  computed: {
    ...mapGetters(["areaTree"]),
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/meituanHotel'
  }),
  data () {
    return {
      loading: false,
      hotelId: null,
      ststusOfMeituan: [
        { dataValue: 0, dataName: '营业中'},
        { dataValue: 1, dataName: '已关门'},
        { dataValue: 2, dataName: '筹建中'},
        { dataValue: 3, dataName: '暂停营业'}
      ]
    }
  },
  methods: {
    detailsOfHotel(hotelId) {
      this.hotelId = hotelId
    },
    // exportList () {
    //   this.loading = true
    //   this.$download('sot-admin-api/hotel/meituanHotel/export', this.list.filter, { method: 'POST' }).finally(e => {
    //     this.loading = false
    //   })
    // },
  }
}
</script>

<style lang="scss" scoped>
</style>

